.popover-panel {
	background-color: $background-white;
	border-radius: $border-radius;
	box-shadow: $box-shadow;
	color: inherit;
	display: block;
	text-decoration: inherit;

	&.feed-popover {
		min-width: 120px;
	}

	.panel-element {
		align-items: center;
		border-bottom: 1px solid $foreground-lightgray;
		color: inherit;
		display: flex;
		font-weight: 600; // TODO: @kenhoff - figure out why we have to set this explicitly, rather than with 'bolder'
		margin: 0 1em;
		padding: 1em 0;
		text-decoration: inherit;

		> * {
			margin-right: 1em;

			&:last-child {
				margin-right: unset;
				min-width: 4em;
				// text-align: right;
			}

			&:nth-child(2) {
				flex-grow: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		&:last-child {
			border-bottom: none;
		}
	}

	.sort-button {
		svg {
			margin-right: 8px !important;
			min-width: auto !important;
		}
	}

	.alert {
		color: $background-red;
	}

	.green {
		color: $foreground-green;
	}
}
